<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html, body{
				width: 100%;
				height: 100%;
			}
			.swiper-container{
				height: 100%;
				width: 100%;
				margin: 0 auto;
			}
			.swiper-wrapper div:nth-child(1){
				background-image: url(img/背景.png);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(2){
				background-image: url(img/ant_bg.png);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(3){
				background-image: url(img/hummingbird_bg.png);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(4){
				background-image: url(img/rabbit_bg.png);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(5){
				background-image: url(img/fengdi_bg.png);
				background-size: 100% 100%;
			}
			#slide1, #slide2, #slide3, #slide4, #slide5{
				position: relative;
			}
			#slide1 img, #slide2 img, #slide3 img, #slide4 img, #slide5 img{
				position: absolute;
			}
			#slide1 img:nth-child(1){
				left: 2%;
				top: 2%;
				width: 10%;
			}
			#slide1 img:nth-child(2){
				left: 14%;
				top: 2%;
				width: 7%;
			}
			#slide1 img:nth-child(3){
				left: 25%;
				top: 2%;
				width: 20%;
			}
			#slide1 img:nth-child(4){
				right: 5%;
				top: 2%;
				width: 7%;
			}
			#slide1 img:nth-child(5){
				left: 20%;
				top: 30%;
				width: 60%;
			}
			#slide1 img:nth-child(6){
				left: 20%;
				top: 20%;
				width: 60%;
			}
			#slide1 img:nth-child(7){
				left: 20%;
				top: 10%;
				width: 40%;
			}
			#slide1 img:nth-child(8){
				left: 30%;
				bottom: 7%;
				width: 40%;
				z-index: 10;
			}
			#slide1 img:nth-child(9){
				right: 5%;
				top: 60%;
			}
			#slide1 img:nth-child(10){
				left: 20%;
				top: 40%;
				width: 50%;
			}
			#slide1 img:nth-child(11){
				left: 25%;
				top: 55%;
				width: 50%;
			}
			#slide1 img:nth-child(12){
				left: 0;
				bottom: 0;
				width: 100%;
			}
			#slide1 img:nth-child(13){
				bottom: 0;
				left: 45%;
				width: 10%;
				z-index: 20;
			}
			
			#slide2 img:nth-child(1){
				top: 7%;
				left: 28%;
				width: 48%;
			}
			#slide2 img:nth-child(2){
				top: 38%;
				left: 10%;
				width: 50%;
				z-index: 10;
			}
			#slide2 img:nth-child(3){
				top: 38%;
				left: 0;
				width: 100%;
			}
			#slide2 img:nth-child(4){
				top: 65%;
				left: 25%;
				width: 40%;
			}
			#slide2 img:nth-child(5){
				bottom: 8%;
				left: 25%;
				width: 50%;
			}
			#slide2 img:nth-child(6){
				bottom: 0%;
				left: 45%;
				width: 10%;
			}
			
			#slide3 img:nth-child(1){
				top: 7%;
				left: 30%;
				width: 40%;
			}
			#slide3 img:nth-child(2){
				top: 30%;
				left: 0;
				width: 40%;
			}
			#slide3 img:nth-child(3){
				top: 39%;
				left: 30%;
				width: 40%;
			}
			#slide3 img:nth-child(4){
				top: 63%;
				left: 25%;
				width: 50%;
			}
			#slide3 img:nth-child(5){
				top: 80%;
				left: 22%;
				width: 50%;
			}
			#slide3 img:nth-child(6){
				bottom: 0%;
				left: 45%;
				width: 10%;
			}
			
			#slide4 img:nth-child(1){
				top: 7%;
				left: 30%;
				width: 40%;
				z-index: 10;
			}
			#slide4 img:nth-child(2){
				top: 22%;
				left: 0;
				width: 100%;
			}
			#slide4 img:nth-child(3){
				top: 50%;
				left: 35%;
				width: 45%;
			}
			#slide4 img:nth-child(4){
				bottom: 10%;
				left: 30%;
				width: 50%;
			}
			
			#slide5 img:nth-child(1){
				top: 37%;
				left: 0;
				width: 100%;
			}
			#slide5 img:nth-child(2){
				top: 85%;
				left: 42%;
				width: 20%;
			}
			#slide5 img:nth-child(3){
				top: 93%;
				left: 10%;
				width: 35%;
			}
			#slide5 img:nth-child(4){
				top: 93%;
				left: 53%;
				width: 35%;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" id="slide1">
					<img class="ani" src="img/1_07.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
					<img class="ani" src="img/1_08.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
					<img class="ani" src="img/1_10.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
					<img class="ani" src="img/2_03.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
					<img class="ani" src="img/xx.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'/>
					<img class="ani" src="img/zd.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'/>
					<img class="ani" src="img/ding.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'/>
					<img class="ani" src="img/nengli.png" swiper-animate-effect='fadeInUp' swiper-animate-duration='1s' swiper-animate-delay='1.5s'/>
					<img class="ani" src="img/bird.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1.5s'/>
					<img class="ani" src="img/car.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1.5s'/>
					<img class="ani" src="img/gf.png" swiper-animate-effect='bounceInDown' swiper-animate-duration='1s' swiper-animate-delay='2s'/>
					<img class="ani" src="img/bu.png" swiper-animate-effect='fadeIn' swiper-animate-duration='1s' swiper-animate-delay='2s'/>
					<img class="ani" src="img/jiantou.png" swiper-animate-effect='flash' swiper-animate-duration='4s' swiper-animate-delay='2s'/>
				</div>
				<div class="swiper-slide" id="slide2">
					<img class="ani" src="img/ant_fz.png" swiper-animate-effect='pulse' swiper-animate-duration='1s' swiper-animate-delay='0.5s'/>
					<img class="ani" src="img/ant.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1.3s'/>
					<img class="ani" src="img/ant_tree.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'/>
					<img class="ani" src="img/ant_car.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='2s' swiper-animate-delay='1.8s'/>
					<img class="ani" src="img/ant_zuli.png" swiper-animate-effect='fadeIn' swiper-animate-duration='1s' swiper-animate-delay='2s'/>
					<img class="ani" src="img/jiantou.png" swiper-animate-effect='flash' swiper-animate-duration='4s' swiper-animate-delay='2s'/>
				</div>
				<div class="swiper-slide" id="slide3">
					<img class="ani" src="img/hummingbird_jf.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.5s'/>
					<img class="ani" src="img/hummingbird_flower.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='0.9s'/>
					<img class="ani" src="img/hummingbird.png" swiper-animate-effect='fadeInRight' swiper-animate-duration='1s' swiper-animate-delay='1.3s'/>
					<img class="ani" src="img/hummingbird_car.png" swiper-animate-effect='bounceInLeft' swiper-animate-duration='2s' swiper-animate-delay='1.8s'/>
					<img class="ani" src="img/hummingbird_speed.png" swiper-animate-effect='bounceInUp' swiper-animate-duration='1s' swiper-animate-delay='2.2s'/>
					<img class="ani" src="img/jiantou.png" swiper-animate-effect='flash' swiper-animate-duration='4s' swiper-animate-delay='2s'/>
				</div>
				<div class="swiper-slide" id="slide4">
					<img class="ani" src="img/rabbit_sun.png" swiper-animate-effect='slideInDown' swiper-animate-duration='1s' swiper-animate-delay='0s'/>
					<img class="ani" src="img/rabbit.png" swiper-animate-effect='slideInLeft' swiper-animate-duration='1s' swiper-animate-delay='0.5s'/>
					<img class="ani" src="img/rabbit_car.png" swiper-animate-effect='pulse' swiper-animate-duration='2s' swiper-animate-delay='1s'/>
					<img class="ani" src="img/rabbit_speed.png" swiper-animate-effect='zoomIn' swiper-animate-duration='1s' swiper-animate-delay='1.5s'/>
				</div>
				<div class="swiper-slide" id="slide5">
					<img class="ani" src="img/fengdi_mes.png" swiper-animate-effect='bounceIn' swiper-animate-duration='1s' swiper-animate-delay='0s'/>
					<img class="ani" src="img/fengdi_submit.png" swiper-animate-effect='flash' swiper-animate-duration='1s' swiper-animate-delay='0.8s'/>
					<img class="ani" src="img/fengdi_lingdian.png" swiper-animate-effect='bounceInLeft' swiper-animate-duration='1s' swiper-animate-delay='1.3s'/>
					<img class="ani" src="img/fengdi_tvc.png" swiper-animate-effect='bounceInRight' swiper-animate-duration='1s' swiper-animate-delay='1.5s'/>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</body>

	<script src="js/swiper.animate.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
			direction: 'vertical',
			pagination: '.swiper-pagination', 
			paginationClickable: true,
			
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    		swiperAnimateCache(swiper); //隐藏动画元素 
	    		swiperAnimate(swiper); //初始化完成开始动画
	  		}, 
	  		onSlideChangeEnd: function(swiper){ 
	    		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  		} 	
		})
	</script>
</html>